<template>
  <div class="chatContent">
    <div class="title">无为而治</div>
    <div class="chatList">
      <div v-for="(item, index) in chatList" :key="index" :class="item.source">
        <img v-if="item.source=='user'" src="https://xecho.oss-cn-hangzhou.aliyuncs.com/blog/avatar17.png" alt="">
        <div class="chatMsg">
          {{ item.message }}
        </div>
        <img v-if="item.source=='manage'" src="https://dss0.bdstatic.com/-0U0bXSm1A5BphGlnYG/tam-ogel/3e420630083d42f53e57e39f4dcddba5_88_88.jpg">
      </div>
    </div>
    <div class="send">
      <input v-model="input" placeholder="请输入内容" @keyup.enter="handleSend">
      <div @click.once="handleSend(e)">
        <svg t="1669774029314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3801" width="50" height="50" @click="handleSend"><path d="M510.3616 90.4704c-232.0896 0-420.864 188.8256-420.864 420.864 0 232.0896 188.8256 420.864 420.864 420.864s420.864-188.8256 420.864-420.864-188.7744-420.864-420.864-420.864z m0 800.8192c-209.5104 0-379.904-170.4448-379.904-379.904 0-209.5104 170.4448-379.904 379.904-379.904 209.5104 0 379.904 170.4448 379.904 379.904 0 209.4592-170.4448 379.904-379.904 379.904z" fill="#00A0E9" p-id="3802" /><path d="M259.4816 439.8592l422.5024-103.5776c20.4288-5.0176 37.5296 15.9744 28.4672 34.9696L522.24 766.4128c-9.728 20.3776-39.3728 18.432-46.2848-3.072l-48.0256-149.4016a25.06752 25.06752 0 0 1 5.2224-24.3712l82.1248-91.0336c5.0176-5.5808-1.6896-13.9264-8.192-10.0864l-108.9536 63.488a24.9856 24.9856 0 0 1-24.6272 0.3072L253.3888 485.9392c-19.9168-11.008-15.9744-40.704 6.0928-46.08z" fill="#00A0E9" p-id="3803" /></svg>
      </div>
    </div>
  </div>
</template>

<script>
import socket from '@/utils/socket.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      input: ''
    }
  },
  computed: {
    ...mapState({
      chatList: state => state.chat.chatList
    })
  },
  mounted() {
    this.scollBar()
  },
  updated() {
    this.scollBar()
  },
  methods: {
    handleSend(e) {
      if (this.input) {
        // 发送消息到小程序
        socket.emit('login', this.input)
        this.$store.commit('chat/chatAddManage', this.input)
        this.input = ''
        e.stopPropagation()
      }
    },
    scollBar() {
      const a = document.querySelector('.chatContent>.chatList')
      if (a.scrollHeight > a.clientHeight) {
      // 设置滚动条到最底部
        a.scrollTop = a.scrollHeight
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.chatContent {
  margin: 20px;
  // width: 100%;
  height: 100%;
  position: relative;

  .title {
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid #dcdfe6;
    width: 100%;
    height: 40px;
    padding-bottom: 60px;
  }

  .chatList {
    // height: 80%;
    max-height: 75%;
    overflow:auto;

    &::-webkit-scrollbar{
      width: 0;
    }

    .user {
      display: flex;
      align-items: center;
      margin-top: 20px;

      img {
        width: 100px;
        align-self: flex-start;
      }

      .chatMsg {
        background: wheat;
        padding: 20px;
        border-radius: 10px;
        position: relative;
        margin-left: 30px;
        max-width: 500px;

        &::before {
          content: '';
          border: 10px solid transparent;
          border-right: 10px solid wheat;
          position: absolute;
          top: 15px;
          left: -20px;
        }
      }
    }

    .manage {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 20px;
      // margin-right: 30px;

      img {
        width: 100px;
        align-self: flex-start;
      }

      .chatMsg {
        background: wheat;
        padding: 20px;
        border-radius: 10px;
        position: relative;
        margin-right: 30px;
        max-width: 500px;

        &::before {
          content: '';
          border: 10px solid transparent;
          border-left: 10px solid wheat;
          position: absolute;
          top: 15px;
          right: -20px;
        }
      }
    }
  }

  .send{
    // background: #000;
    width: 100%;
    position: absolute;
    bottom: 80px;

    input{
      outline-style: none;
      border: 0px;
      height: 80px;
      padding-left: 30px;
      border-radius: 20px;
      width: 100%;
      background: #ffffff;
      box-shadow: inset 20px 20px 60px #d9d9d9,
            inset -20px -20px 60px #ffffff;
    }
    svg{
      position: absolute;
      z-index: 1;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
}
</style>
